.alfresco-renderers-Thumbnail {
   display: block;
   width: @thumbnail-width;
   height: @thumbnail-height;
   position: relative; /* This is required for absolutely positioned overlays */

   .alfresco-renderers-Thumbnail__frame {
      display: inline-block;
      height: @thumbnail-height;
      width: @thumbnail-width;
      line-height: @thumbnail-height;
      text-align: center;
      overflow: hidden;
   }

   .alfresco-renderers-Thumbnail__image {
      cursor: pointer;
      max-height: @thumbnail-height - @thumbnail-margin - @thumbnail-margin - @thumbnail-border-width;
      max-width:  @thumbnail-width - @thumbnail-margin - @thumbnail-margin - @thumbnail-border-width;
      vertical-align: top;
      margin: @thumbnail-margin;
      border: @thumbnail-border-width @thumbnail-border-style @thumbnail-border-color;
   }
   
   &--shadow {
      .alfresco-renderers-Thumbnail__image {
         box-shadow: @thumbnail-box-shadow;
      }
   }

   &--bottom {
      .alfresco-renderers-Thumbnail__image {
         vertical-align: bottom;
      }
   }

   &--middle {
      .alfresco-renderers-Thumbnail__image {
         vertical-align: middle;
      }
   }

   &--left {
      .alfresco-renderers-Thumbnail__frame {
         text-align: left;
      }
   }

   &--right {
      .alfresco-renderers-Thumbnail__frame {
         text-align: right;
      }
   }

   &.alfresco-lists-ItemSelectionMixin--selected {

      .alfresco-renderers-Thumbnail__frame {
         box-shadow: @selection-box-shadow;
      }
   }
}